<template>
  <div class="login-box">
    <div class="login-logo">
      <img src="@/assets/images/cloud-logo.png" alt="" height="100" width="100"
        style="border-radius: 50%; background-color: #fff" />
      <h1 class="logo-text">病原微生物菌（毒）种智能保藏管理系统</h1>
    </div>
    <div class="sign-content">
      <ul class="sign-header">
        <li :class="{ active: active === 1 }" @click="show(1)">实验室</li>
      </ul>
      <div class="sign-form" v-if="active != 4 || isDev">
        <a-form layout="horizontal" :model="state.formInline" @submit.prevent="handleSubmit">
          <a-form-item>
            <a-input v-model:value="state.formInline.username" size="large" :placeholder="username" allowClear>
              <template #prefix><user-outlined type="user" /></template>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input-password v-model:value="state.formInline.password" size="large" :placeholder="password">
              <template #prefix><lock-outlined type="user" /></template>
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" size="large" :loading="state.loading" block>
              登录
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <div class="login-footer">
      <div class="footer-container">
        <div class="find-error">
          <img src="@/assets/images/red.png" alt="" @click="dang" style="margin-right: 20px" />
          <img src="@/assets/images/jiucuo.png" alt="" @click="findError" style="margin-right: 20px" />
        </div>
        <div class="right">
          <p>
            <span>联系方式：{{ config.mobile || '(0571) 8770 8967' }}</span>
            <span style="cursor: pointer" @click="beian">备案序号：{{ config.beianxuhao || '浙ICP备19049905号' }}</span>
          </p>
          <p>
            <span>网站标识码：{{ config.websiteCode || 3300000005 }}</span>
            <span>{{ config.org || '浙江省卫生健康中心' }}</span>
            <span>网站技术支持请联系：{{ config.suport || 'webmaster@zjwjw.gov.cn' }}</span>
          </p>
          <p>
            <span>{{
              config.copyright || 'Copyright© 2000 浙江省卫生健康委员会主办'
            }}</span>
            <span style="cursor: pointer" @click="zhegongwanganbei">
              <img src="@/assets/images/footericon.png" alt="" style="display: inline" />
              浙公网安备：{{ config.zhegongwanganbei || '33010302001491' }}号</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { useUserStore } from '@/store/modules/user';
import config from '@/config';
import { useRoute, useRouter, RouteRecordRaw } from 'vue-router';
import { JSEncrypt } from 'jsencrypt';
const isDev = process.env.NODE_ENV === 'development';
const state = reactive({
  loading: false,
  captcha: '',
  formInline: {
    username: '',
    password: '',
    token_type: 'jwt',
  },
});

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const jsencrypt = new JSEncrypt();
jsencrypt.setPublicKey(config.pubKey);

const getFirstRouteName = (list: RouteRecordRaw[]) => {
  for (let item of list) {
    if (item.meta?.hideInMenu) {
      continue;
    }
    if (item.children && item.children.length) {
      return getFirstRouteName(item.children);
    } else {
      return item.name;
    }
  }
};
const handleSubmit = async () => {
  const { username, password } = state.formInline;
  if (username.trim() == '' || password.trim() == '') {
    return message.warning('用户名或密码不能为空！');
  }
  message.loading('登录中...', 0);
  state.loading = true;
  // console.log(state.formInline);
  try {
    const data = {
      username: state.formInline.username,
      password: state.formInline.password,
      token_type: 'jwt',
    };
    //md5加密
    // const psw = jsencrypt.encrypt(state.formInline.password)
    // if (psw) {
    //   data.password = psw
    // } else {
    //   return message.warning('加密失败')
    // }
    await userStore
      .login(data)
      .then((res) => {
        const menu = res?.menus;
        const firstRouteName = getFirstRouteName(menu!);
        // console.log(menu, 'menu') // 注意不要操作这个menu引用
        // console.log(firstRouteName, 'asd')
        setTimeout(() => {
          if (route.query.redirect) {
            router.replace(route.query.redirect as string);
          } else {
            router.replace({
              name: firstRouteName || 'home',
            });
          }
          // router.replace((route.query.redirect as string) ?? loginRedirectMap[active.value] ?? '/')
        });
      })
      .finally(() => {
        state.loading = false;
        message.destroy();
      });
    message.success('登录成功！');
  } catch (error: any) {
    Modal.error({
      title: () => '提示',
      content: () => error.message,
    });
  }
};

let active = ref(1);
let username = ref('请输入实验室账号');
let password = ref('请输入密码');
const dang = () => {
  // window.open(config.dang || 'https://bszs.conac.cn/sitename?method=show&id=06C71BD04158417DE053012819AC3CC6')
};
const findError = () => {
  window.open(
    config.findError ||
    'https://zfwzgl.www.gov.cn/exposure/jiucuo.html?site_code=3300000068',
  );
};
const beian = () => {
  window.open('https://beian.miit.gov.cn/#/Integrated/index');
};
const zhegongwanganbei = () => {
  window.open(
    `http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${config.zhegongwanganbei || '33010302001491'
    }`,
  );
};
</script>

<style lang="less" scoped>
.login-box {
  display: flex;
  width: 100vw;
  height: calc(100vh - 100px);
  padding-top: 180px;
  background: url('@/assets/images/BG02.png');
  background-size: 100% 100%;
  flex-direction: column;
  align-items: center;

  .login-logo {
    display: flex;
    margin-bottom: 30px;
    align-items: center;

    .svg-icon {
      font-size: 48px;
    }
  }

  :deep(.ant-form) {
    width: 400px;
    margin: 0 auto;

    .ant-col {
      width: 100%;
    }

    .ant-form-item-label {
      padding-right: 6px;
    }
  }
}

.logo-text {
  font-size: 32px;
  color: #ffffff;
  line-height: 64px;
  margin-left: 16px;
  font-weight: normal;
}

.sign-content {
  width: 480px;
  padding: 0 40px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px;
}

.sign-header {
  padding: 20px 0;

  li {
    display: inline-block;
    width: 33%;
    height: 40px;
    font-size: 20px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
  }

  li:hover {
    color: #4587ff;
  }
}

.sign-form {
  margin: 0 auto;
  margin-bottom: 40px;
}

.active {
  color: #4587ff;
  font-weight: bold;
}

.mid-text {
  font-size: 18px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.img-filter {
  filter: blur(3px);
}

.login-footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100vw;
  background-color: #eee;
}

.footer-container {
  margin: 0 auto;
  height: 80px;
  margin-top: 10px;
  width: 90%;
  display: flex;
  justify-content: center;

  .find-error {
    border-right: 1px solid #aaa;

    // width: 220px;
    img {
      display: inline;
    }
  }

  .right {
    padding-left: 20px;

    p {
      line-height: 18px;
      margin: 5px;
      text-align: center;

      span {
        display: inline-block;
        margin-right: 30px;
      }
    }
  }
}
</style>
